<template>
  <Head>
    <Title>Blogs</Title>
  </Head>

  <PageHeader title="Blogs" subtitle="Blogs" :image="`${$config.public.baseUrl}images/bg/home1/4.png`"/>

  <section
    class="blog blog--style1 padding-top padding-bottom"
    data-aos="fade-up"
    data-aos-duration="800"
  >
    <div class="container">
      <div class="section-header text-center">
        <h2>Latest News, Blogs & Articles</h2>
      </div>
      <div class="blog__wrapper">
        <Pagination :dataList="posts" :paginate="9">
          <template #content="{ list }">
            <div class="row g-4">
              <div
                v-for="(itm, idx) in list"
                :key="idx"
                class="col-lg-4 col-md-6"
              >
                <BlogCard :details="itm" />
              </div>
            </div>
          </template>
          <template #button="{ paginationButtons, updateCurrent, current }">
            <div class="paginations">
              <ul class="lab-ul d-flex flex-wrap justify-content-center mb-1">
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="updateCurrent(current - 1 || 1)"
                    ><i class="fa-solid fa-arrow-left"></i
                  ></a>
                </li>
                <li v-for="item in paginationButtons" :key="item">
                  <a
                    href="javascript:void(0);"
                    :class="{ active: current === item }"
                    @click="updateCurrent(item)"
                  >
                    {{ item }}
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="
                      updateCurrent(
                        paginationButtons > current
                          ? current + 1
                          : paginationButtons
                      )
                    "
                    ><i class="fa-solid fa-arrow-right"></i
                  ></a>
                </li>
              </ul>
            </div>
          </template>
        </Pagination>
      </div>
    </div>
  </section>

  <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <Newsletter />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/base/slots/Pagination.vue";
import BlogCard from "@/components/partials/BlogCard.vue";
import PageHeader from "@/components/partials/PageHeader.vue";
import Newsletter from "@/components/partials/newsletters/Newsletter.vue";

export default {
  components: { PageHeader, Pagination, BlogCard, Newsletter },
  async setup() {
    const { axios } = fetchData();
    const blog = await axios.get("/blog.json");
    const posts = blog.data.posts;
    return {
      posts,
    };
  },
};
</script>